{% extends "master/layout.html" %}
{% block content %}
        <div class="content">
        {% block formTitle %}
            <form method="post" action="/cmdb/index/wf/requests/add/">
        {% endblock %}

            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card p-4">


                            <div class="card-header bg-light">
                                添加流程<label style="color: red;">{{status}}</label>
                            </div>



                            <div class="card-body">

                                    <div class="col-md-7">
                                        <div class="form-group">
                                            <label for="sponsor" class="form-control-label require">发起人</label>
                                            <input type="text" id="sponsor" class="form-control" readonly value="{{login_user}}" name="sponsor">
                                        </div>
                                    </div>

                                    <div class="col-md-7">
                                        <div class="form-group">
                                            <label for="title" class="form-control-label require">标题</label>
                                            <input type="text" id="title" class="form-control" name="title">
                                        </div>
                                    </div>

                                    <!--
                                    <div class="col-md-7">
                                        <div class="form-group">

                                            <label for="date" class="form-control-label require">执行时间</label>
                                            <input type="datetime-local" id="date" class="form-control" name="date">

                                        </div>
                                    </div>-->


                                   <div class="col-md-7">
                                        <div class="form-group">
                                            <label for="single-select1" class="require">请求类型</label>
                                            <select id="single-select1" class="form-control" name="type">
                                                {% for item in wf_type %}
                                                <option value={{item.id}}>{{item.name}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-7">
                                        <div class="form-group">
                                            <label for="single-select2" class="require">业务单元</label>
                                            <select id="single-select2" class="form-control" name="wf_business" onchange="wfbusinessChange(this)">
                                                <option value="0">------------- 请选择 -------------</option>
                                                {% for item in wf_business %}
                                                <option value={{item.id}}>{{item.name}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-7">
                                        <div class="form-group">
                                            <label for="textarea1" class="require">请求内容</label>
                                            <textarea id="textarea1" class="form-control" name="content"></textarea>
                                        </div>
                                    </div>





                                    <div class="col-md-7">
                                        <div class="form-group">
                                            <label for="single-select" class="require">审批人</label>
                                            <select id="single-select" class="form-control" name="approval">
                                                <option value="0">------------- 请选择 -------------</option>
                                                {% for item in wfbusiness %}
                                                <option value={{item.id}}>{{item.director.username}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>



                                    <div class="col-md-7">

                                        <div class="form-group">
                                            <label for="file" class="form-control-label">
                                                添加附件
                                            </label>
                                            <div id="progressBar" class="progress form-group" style="height: 10px" hidden="hidden">
                                                <div class="progress-bar bg-success" role="progressbar"
                                                 aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                                </div>
                                            </div>
                                            <input type="file" id="file" name="myfile" multiple="multiple"
                                               oninput="UploadFile_temp()" class="form-control" />
<!--                                           <input type="file" id="file" name="myfile" multiple="multiple"
                                               class="form-control" />-->
                                            <input type="button" onclick="UploadFile()" value="上传" />
<!--                                            <input type="button" onclick="CancelUploadFile()" value="取消" />-->
<!--
                                            <div id="showFile" class="alert alert-dismissible alert-secondary" hidden>
                                                sdkjfadsl;fjas
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>-->
                                            <div id="showFile"></div>

                                        </div>

                                    </div>


                                    <div class="col-md-7">
                                        <div class="form-group">
                                            <label for="textarea">备注</label>
                                            <textarea id="textarea" class="form-control" rows="6" name="memo"></textarea>
                                        </div>
                                    </div>
                            </div>

                            <div class="card-footer p-4">
                                <div class="row">
                                    <div class="col-5">
                                        <button type="submit" class="btn btn-primary px-5">添加</button>
                                    </div>
                                    <div class="col-5">
                                        <a href="/cmdb/index/wf/requests/" class="btn btn-outline-primary px-5">取消</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
     {% block formFooter %}
        </form>
    {% endblock %}

        </div>
{% endblock %}
{% block javascript %}
<script>

    function wfbusinessChange(arg){
        var wfbusiness=$(arg).val();
        console.log(wfbusiness);
        $.ajax({
                url:'/cmdb/index/wf/wfbusiness/ajax/',
                data:{wfbusiness:wfbusiness},
                type:'POST',
                success:function (data) {
                    //window.parent.location.reload();
                    //$(body).html(data);
                    //alert('删除成功')
                    console.log(data);
                    var director=JSON.parse(data)['director'];
                    var director_id=JSON.parse(data)['director_id'];
                    console.log(director,director_id);
                    target=document.getElementById('single-select');
                    console.log(target);
                    target.innerHTML='<option value='+director_id+'>'+director+'</option>';
                },
                error:function () {
                    alert('服务器异常');
                }
            });
    }


    function UploadFile_temp() {
       //var files=$('#file').val();
       var files=document.getElementById('file').files;
       //var j=0;//计算选择文件个数
       //console.log(files);
       var progress=document.getElementById('progressBar');
       progress.setAttribute("hidden","hidden");
       if (files.length){

           var box=document.getElementById('showFile');
           box.innerHTML='';//清空上次选择的文件
           //var box=document.getElementById("box");
           //box.parent.removeChild(box);//删除子节点
           //box.remove();//删除自身

          for(i=0;i<files.length;i++){
             console.log(files[i],files[i].name,);
             var formData=new FormData();
             formData.append('mf',files[i]);
             formData.append('fileName',files[i].name);
             //console.log(formData);

             progress.removeAttribute("hidden");
             progress.firstElementChild.setAttribute("style","width: 100%");
             progress.firstElementChild.innerHTML="100%";


             //$('#showFile').after();
             var element_a=document.createElement("a");
			 element_a.style='text-decoration:underline;color:blue;font-size:10px;display:block;';
			 //element_a.style='text-decoration:underline;color:blue;font-size:10px;';
			 //element_a.style='text-decoration:underline;color:blue;font-size:10px;margin-left:5px';
			 element_a.setAttribute('href', 'file:///C:/Users/hu.chen/upload/'+files[i].name);
			 //element_a.setAttribute('href', 'https://www.baidu.com');
			 //element_a.setAttribute('onclick', 'function download()');
			 //element_a.setAttribute('name','fileName');
			 element_a.innerText=files[i].name;
             document.getElementById('showFile').appendChild(element_a);
             //var count=j++;

          }
          alert('共选择了'+i+'个文件');
          //console.log(i);
       }else {
            //var obj = document.getElementById('file') ;
            //console.log(obj);
            //obj.outerHTML=obj.outerHTML;
            //console.log(obj.outerHTML);
            //obj.select();
            //document.selection.clear();
            var box=document.getElementById('showFile');
            //console.log(box);
            box.innerHTML='';
            //box.parent.removeChild(box);//删除子节点
            //var box=document.getElementById("box");
            //box.remove();//删除自身

       }
    }

    function UploadFile() {
       //var files=$('#file').val();
       var files=document.getElementById('file').files;
       var j=0;
       //console.log(files);
       var progress=document.getElementById('progressBar');
       progress.setAttribute("hidden","hidden");

       if (files.length){
          for(i=0;i<files.length;i++){
             console.log(files[i],files[i].name,);
             var formData=new FormData();
             formData.append('mf',files[i]);
             formData.append('fileName',files[i].name);
             console.log(formData);
             $.ajax({
                url: '/cmdb/index/wf/form_add/',
                //url: '/cmdb/index/wf/add/',
                //url: '/cmdb/index/wf/upload/',
                //data: {files:files[0]},
                data: formData,
                type: 'POST',
                cache: false,
                processData: false,//must
                contentType: false,//must
                success: function (data) {
                   //console.log(data)
                   //alert('上传成功',data);
                   count=j++;
                   if(count==files.length-1){
                      alert('上传成功',data);
                      //console.log(i);
                   }
                },
                error: function () {
                   alert('服务器异常');
                }
             });

          }

       }else {
           alert('请先选择文件！');
       }
    }

    function CancelUploadFile(){
        var obj = document.getElementById('file') ;
        console.log(obj);
        obj.outerHTML=obj.outerHTML;
        console.log(obj.outerHTML);
        //obj.select();
        //document.selection.clear();
    }

    function download(){
        window.open('https://www.baidu.com');
    }

/*
     var xhr;
        var ot;//
        var oloaded;
        //上传文件方法
        function UpladFile() {
            var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
            var url = ""; // 接收上传文件的后台地址

            var form = new FormData(); // FormData 对象
            form.append("mf", fileObj); // 文件对象
console.log(fileObj)
            xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
            xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
            xhr.onload = uploadComplete; //请求完成
            xhr.onerror =  uploadFailed; //请求失败
            xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
            xhr.upload.onloadstart = function(){//上传开始执行方法
                ot = new Date().getTime();   //设置上传开始时间
                oloaded = 0;//设置上传开始时，以上传的文件大小为0
            };
            xhr.send(form); //开始上传，发送form数据
        }
        //上传进度实现方法，上传过程中会频繁调用该方法
        function progressFunction(evt) {

             var progressBar = document.getElementById("progressBar");
             var percentageDiv = document.getElementById("percentage");
             // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
             if (evt.lengthComputable) {//
                 progressBar.max = evt.total;
                 progressBar.value = evt.loaded;
                 percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
             }

            var time = document.getElementById("time");
            var nt = new Date().getTime();//获取当前时间
            var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为s
            ot = new Date().getTime(); //重新赋值时间，用于下次计算

            var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
            oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算

            //上传速度计算
            var speed = perload/pertime;//单位b/s
            var bspeed = speed;
            var units = 'b/s';//单位名称
            if(speed/1024>1){
                speed = speed/1024;
                units = 'k/s';
            }
            if(speed/1024>1){
                speed = speed/1024;
                units = 'M/s';
            }
            speed = speed.toFixed(1);
            //剩余时间
            var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
            time.innerHTML = '，速度：'+speed+units+'，剩余时间：'+resttime+'s';
               if(bspeed==0)
                time.innerHTML = '上传已取消';
        }
        //上传成功响应
        function uploadComplete(evt) {
         //服务断接收完文件返回的结果
         //    alert(evt.target.responseText);
             alert("上传成功！");
        }
        //上传失败
        function uploadFailed(evt) {
            alert("上传失败！");
        }
          //取消上传
        function cancleUploadFile(){
            xhr.abort();
        }
*/
</script>
{% endblock %}